<template>
	<view class="container" >
        <scroll-view  class="tree-cont"  scroll-y="true">
        <ly-tree :tree-data="data" 
            :ready="ready"
            :props="defaultProps" 
            ref="tree" 
            node-key="id" 
            :show-radio="type=='single'?true:false"
            :show-checkbox="type=='multiple'?true:false"
            checkOnClickNode
            showNodeIcon
            :default-expanded-keys="defaultSelectArr" 
            :default-checked-keys="defaultSelectArr"
            @node-click="handleNodeClick" 
            @check-change="handleCheckChange" 
            @radio-change="handleRadioChange">
        </ly-tree>
        </scroll-view >
        <view class="bottomBtn">
             <button type="primary" @click="getCheckedKeys">确定</button>
        </view>
    </view>
</template>


<script>
    import LyTree from '@/components/other-com/ly-tree/ly-tree.vue'
    import {queryAddressBook} from '@/pages/addressBook/interface.js';
	export default {
        
		components: {
			LyTree
		},
		data() {
			return {
                ready:false,
                type:'single',
                eventName:"defaultEvenName",
                defaultSelectArr:[],
				data: [{
					id: 1,
					label: '一级 1',
					children: [{
						id: 4,
						label: '二级 1-1',
						children: [{
							id: 9,
							label: '三级 1-1-1'
						}, {
							id: 10,
							label: '三级 1-1-2'
						}]
					}]
				}, {
					id: 2,
					label: '一级 2',
					children: [{
						id: 5,
						label: '二级 2-1'
					}, {
						id: 6,
						label: '二级 2-2'
					}]
				}, {
					id: 3,
					label: '一级 3',
					children: [{
						id: 7,
						label: '二级 3-1'
					}, {
						id: 8,
						label: '二级 3-2'
					}]
				}],
				defaultProps: {
					children: 'children',
					label: 'label',
                    icon:"avatar"
				}
			};
        },
        onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
            console.log(option.type); //打印出上个页面传递的参数。
            // this.singleSelect = option.type=="single"?true:false
            // this.multipleSelect = option.type=="multiple"?true:false
            this.type = option.type;
            this.eventName = option.eventName||'defaultEvenName';
            let select_data = option.defaultSelect&&option.defaultSelect.split(',') ||[];
            if(option.type == 'single'&& select_data.length>0){
                select_data = [select_data[0]];
            }
            this.defaultSelectArr = select_data;
            console.log('defaultSelectArr:',this.defaultSelectArr);
        
         },
         created(){
            this.getAddressBookData();
        },
		methods: {
			handleRadioChange(obj) {
                // console.log('handleRadioChange', JSON.stringify(obj));
              
			},
			handleNodeClick(obj) {
				// console.log('handleNodeClick', JSON.stringify(obj));
				// console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
            },
            handleCheckChange(obj) {
                // console.log('handleCheckChange', JSON.stringify(obj));
                
            },
            getCheckedKeys() {
                let data =  this.$refs.tree.getCheckedNodes();
                 console.log('getCheckedNodes',data);
                if(Array.isArray(data)&& data.length>0){
                    
                    uni.$emit(this.eventName,{
                        data:data
                    })

                    uni.navigateBack();
                }else{
                    uni.showToast({
                        icon:'none',
                        title:'还未选择！'
                    })
                }
               
			},
            async getAddressBookData(){
                let params = {};
                let Res = await queryAddressBook(params);
                this.ready = true;
                if(Res && Res.success){
                   
                    this.data = Res.result;
                }else{
                    uni.showToast({
                        icon:'none',
                        title:Res.message ||'保存失败~！',
                    })
                }
            }
		}
	};
</script>

<style lang="scss">
	

.tree-cont{
    height: 90vh;
    background-color: #fff;
}
    .bottomBtn{
        height:10vh;
        box-sizing: border-box;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 30upx 30upx;
        padding-top:0;
        box-sizing: border-box;
        background-color: #fff;
    }
</style>